<!DOCTYPE html>
<html lang="en" style="height: 100%" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>审批数据管理</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="/css/plugins/morris/morris-0.4.3.min.css">
    <link rel="stylesheet" href="/js/plugins/gritter/jquery.gritter.css">
    <link rel="stylesheet" href="/css/animate.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/plugins/toastr/toastr.min.css">
    <style>
        /*定义类名为.thead-blue的样式*/
        .table .thead-blue th {
            color: #fff;
            background-color: #3195f1;
        }
        /*模态框导致页面偏移问题*/
        .modal-open{
            overflow-y: scroll;
        }

        label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 700;
            margin-right: 20px;
        }

        .toast-center-center {
            left: 50%;
            top: 35%;
            transform: translate(-50%,-50%);
        }

        .pagination-detail {
            margin-left: 20px;
        }

        .float-e-margins .btn {
            margin-bottom: 0px;
        }

        #pendingTable tr {
            text-align: center;
            font-size: 15px;
            font-family: 微软雅黑;
            background-color: seashell;
        }

        #pendingTable tr:hover {
            background-color: #E6E1DC;
        }

        .bootstrap-table .fixed-table-container .table {
            white-space: normal;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div id="page-wrapper" class="gray-bg dashbard-1">
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>审批交易列表</h5>
                        </div>
                        <div class="ibox-content" style="padding: 0">
                            <div id="fixed-table-toolbar" style="padding:0;margin: 0">
                                <div class="form-group" style="float: right;width: 100%;margin-top: 10px">
                                    <form role="form" class="form-inline">
                                        <div class="form-group" style="margin-top: 5px;margin-left: 20px">
                                            <text><font size="3">状态: </font></text>
                                            <select class="form-control" id="status" name="status">
                                                <option value="" selecte></option>
                                                <option value="PEN">Pending</option>
                                                <option value="REJ">Reject</option>
                                                <option value="APP">Approve</option>
                                            </select>

                                            <text style="margin-left: 10px"><font size="3">操作类型: </font></text>
                                            <select class="form-control" id="txType" name="txType">
                                                <option value="" selecte></option>
                                                <option value="ADD">ADD</option>
                                                <option value="MOD">MOD</option>
                                                <option value="DEL">DEL</option>
                                            </select>

                                            <button type="button" class="btn btn-primary" id="search" style="margin-left: 10px">
                                                <span class="glyphicon glyphicon-search"></span>
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <table id="pendingTable" class="table table-hover table-condensed"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!--信息提示模态框-->
<div class="modal fade" id="resultModal" tabindex="-1" role="dialog" aria-labelledby="resultModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="resultModalLabel">信息提示</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="text-align: center;font-size: large;">
                <span id="resultId" class="modal-body span"/>
            </div>
        </div>
    </div>
</div>

<!--审批拒绝模态框-->
<div class="modal fade" id="rejectModel" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form>
                    <input type="hidden" id="pendigNumber" name="pendigNumber"/>
                    <div class="form-group">
                        <label class="col-form-label">审批不通过描述:</label>
                        <textarea class="form-control" id="remark" maxlength="100"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="rejectPending">确认</button>
            </div>
        </div>
    </div>
</div>


<!--审批通过模态框-->
<div class="modal fade" id="approveModel" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form>
                    <input type="hidden" id="approvePendingNumber" name="pendigNumber"/>
                    <div class="form-group">
                        <label for="message-text" class="col-form-label">审批通过描述:</label>
                        <textarea class="form-control" id="approveRemark" maxlength="100"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="approvePending">确认</button>
            </div>
        </div>
    </div>
</div>



<script src="/js/jQuery.min.js"></script>
<script src="/js/plugins/toastr/toastr.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/bootstrap/js/bootstrap-editable.js"></script>
<script src="/bootstrap/js/bootstrap-table.min.js"></script>
<script src="/bootstrap/js/bootstrap-table-zh-CN.js"></script>
<script src="/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="/js/hplus.js?v=2.2.0"></script>
<script src="/js/plugins/pace/pace.min.js"></script>
<script src="/js/index.js"></script>
<script src="/js/pendingList.js"></script>

</body>
</html>
